<template>
  <div>
    <p :class="color">
      style-module 使用，在style上面加上style module="className"
        </p>
        <button @click="handClick">改变样式</button>
          </div>
        </template>

        <script>
        export default {
          name: 'moduleStyle',
          data() {
            return {
              color: this.className.green
            }
          },
          methods: {
            handClick() {
              this.color =
                this.color == this.className.red
                  ? this.className.green
                  : this.className.red
            }
          }
        }
        </script>

        <style module="className">
        .red {
          color: red;
        }
        .green {
          color: green;
        }
      </style>
      <style lang="scss" scoped>
        .box {
          font-size: 20px;
        }
      </style>
    </p>
  </div>
</template>
